<template>
  <div>
    <el-form
      ref="shopForm"
      :model="shopForm"
      :rules="rules"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="店铺名称" prop="shopName">
            <el-input v-model="shopForm.shopName"></el-input>
          </el-form-item>
          <el-form-item label="店铺地址" prop="shopAddress">
            <el-input v-model="shopForm.shopAddress"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="shopForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="营业时间" prop="yingyeTime">
            <el-input v-model="shopForm.yingyeTime"></el-input>
          </el-form-item>
          <el-form-item label="经营范围" prop="jingyingfw">
            <el-input v-model="shopForm.jingyingfw"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="fuzer">
            <el-input v-model="shopForm.fuzer"></el-input>
          </el-form-item>
          <el-form-item label="店铺面积" prop="dianpumj">
            <el-input-number
              v-model.number="shopForm.dianpumj"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="开店日期" prop="shopDate">
            <el-date-picker
              v-model="shopForm.shopDate"
              type="date"
              placeholder="选择开店日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="shopForm.email"></el-input>
          </el-form-item>
          <el-form-item label="所在区域" prop="region">
            <el-input v-model="shopForm.region"></el-input>
          </el-form-item>
          <el-form-item label="是否连锁" prop="liansuo">
            <el-switch v-model="shopForm.liansuo"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="店铺网址" prop="wangAddress">
        <el-input v-model="shopForm.wangAddress"></el-input>
      </el-form-item>
      <el-form-item label="客服电话" prop="kefuPhone">
        <el-input v-model="shopForm.kefuPhone"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align: center; margin-top: 20px">
      <el-button @click="showMapDialog">选择店铺位置</el-button>
      <!-- 地图弹框组件 -->
      <MapDialog v-model="mapVisible" @confirm="handleAddressConfirm" />
      <el-button type="primary" @click="submitShopForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </div>
</template>




<script>
import axios from "axios";
import MapDialog from "../Address/Window.vue";
export default {
  components: { MapDialog },
  data() {
    return {
      mapVisible: false,
      selectedAddress: "",
      shopForm: {
        shopName: "",
        shopAddress: "",
        phone: "",
        yingyeTime: "",
        jingyingfw: "",
        fuzer: "",
        dianpumj: 0,
        shopDate: "",
        email: "",
        region: "",
        liansuo: false,
        wangAddress: "",
        kefuPhone: "",
      },
      rules: {
        shopName: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
        ],
        shopAddress: [
          { required: true, message: "请输入店铺地址", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        shopArea: [
          { type: "number", message: "请输入有效的店铺面积", trigger: "blur" },
        ],
        openingDate: [
          { required: true, message: "请选择开店日期", trigger: "change" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
    };
  },
  model: {
    prop: "dialogFormVisible",
    event: "change",
  },
  props: {
    dialogFormVisible: Boolean,
  },
  methods: {
    showMapDialog() {
      this.mapVisible = true;
    },
    handleAddressConfirm(addressData) {
      this.selectedAddress = `${addressData.name} (${addressData.address})`;
      (this.shopForm.shopName = addressData.name), this.shopForm.addressData.name;
      // 格式示例：蜜雪冰城中东门店 (北京市海淀区中关村大街1号)
    },
    submitShopForm() {
      this.$refs.shopForm.validate((valid) => {
        if (valid) {
          // 模拟发送 POST 请求到后端接口添加店铺信息
          this.axios({
            method: "post",
            url: "HJQ_store_info",
            data: this.shopForm,
          })
            .then((response) => {
              if (response.code > 0) {
                this.$message.success("店铺信息添加成功");
                this.resetForm();

                //刷新主页面数据
                this.$emit("refresh");
                //关闭弹窗
                this.$emit("change", false);
              } else {
                this.$message.error(
                  "店铺信息添加失败：" + response.data.message
                );
              }
            })
            .catch((error) => {
              console.error("Error adding shop:", error);
              this.$message.error("店铺信息添加失败：网络错误，请稍后重试");
            });
        } else {
          console.log("表单验证不通过");
          return false;
        }
      });
    },
    resetForm() {
      this.shopForm = {
        shopName: "",
        shopAddress: "",
        phone: "",
        yingyeTime: "",
        jingyingfw: "",
        fuzer: "",
        dianpumj: 0,
        shopDate: "",
        email: "",
        region: "",
        liansuo: false,
        wangAddress: "",
        kefuPhone: "",
      };
      this.$refs.shopForm.resetFields();
    },
  },
};
</script>

<style scoped>
/* 可根据需要添加更多自定义样式 */
.el-form-item {
  margin-bottom: 15px;
}
</style>